<script>
import { reactive, onBeforeUnmount } from "vue";
import { ref } from 'vue';
import { Toast } from 'vant';
import { useRouter } from "vue-router";
import BomNav from "../components/BomNav.vue";
import "../assets/font-four/iconfont.css"
export default {
  components: {
    BomNav,
  },
  setup() {
    

    //充值
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    let router = useRouter();

    // 生命周期卸载
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount生命周期卸载");
    });

    let data = reactive({
      login:false,
      night:window.localStorage.getItem("night"),
      coin:window.localStorage.getItem("coin"),
      price:0,
      tickey:window.localStorage.getItem("tickey"),
      tishow:true,
      numlist:[
        {
          id:1,
          num:600,
          show:false
        },
        {
          id:2,
          num:3000,
          show:false
        },
        {
          id:1,
          num:6000,
          show:false
        },
        {
          id:1,
          num:9800,
          show:false
        },
      ]
    });
    console.log(data.night);
    let loginFun = () =>{
        router.push("/login");
    }
    let getNum = (index) =>{
      data.price=data.numlist[index].num/100
    }
    //夜间模式
    let gonight = () =>{
      data.night=!data.night
      window.localStorage.setItem("night",data.night)
    }
    if(window.localStorage.getItem("token")){
      data.login=true
    }
    //充值
    let invest = () => {
      let coin=parseInt(window.localStorage.getItem("coin"))+parseInt(data.price*100)
      data.coin=coin
      window.localStorage.setItem("coin",coin)
      show.value = false;
      Toast.loading({
      message:"充值中",
      forbidClick:true,
      loadingType:"spinner"
      })
      // Toast.success("充值成功")
    }
    //签到
    let sign = () =>{
      let tickey = parseInt(window.localStorage.getItem("tickey"))+parseInt(100)
      data.tickey=tickey
      data.tishow=false
      window.localStorage.setItem("tickey",tickey)
      Toast.success("签到成功，获得100月票")
    }
    let goHome = () => {
      console.log(router);

      // 跳转HOME
      router.push("/");
    };

    //跳转设置
    let Setups = () => {
       router.push("/setups")
    }

    //我的关注
    let Conce = () => {
      router.push("/concern")
    }
    let goto = ()=>{
      router.push('/hshop')
    }
    let godd = ()=>{
       router.push('/shopOrder')
    }
    return {
      show,
      showPopup,
      goHome,
      goto,
      loginFun,
      gonight,
      getNum,
      Setups,
      invest,
      sign,
      data,
      Conce,
      godd

    };
  },
};
</script>

<template>
  <div :class="['mycenter',data.night?'':'night']">
    <div class="container">
      <div class="content">
        <header>
          <div class="topBtn">
            <i @click="gonight" :class="['iconfont', data.night?'icon-yueliang': 'icon-taiyang']"></i>
            <i class="iconfont icon-shezhi" @click="Setups"></i>
          </div>
        </header>
        <div class="login">
          <div class="before" v-show="data.login==false">
            <h2>欢迎来到 EndNovel</h2>
            <div class="btn" @click="loginFun">立即登录</div>
          </div>
          <div class="after" v-show="data.login">
              <img src="https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg" alt="">
              <p>23uyy</p>
          </div>
        </div>
        
        <div class="moneybox">
          <div class="money">
            <div class="sth coin">
              <strong>{{data.coin}}</strong>
              <span>书币余额(币)</span>
            </div>
            <div class="sth ticket">
              <strong>{{data.tickey}}</strong>
              <span>月票(张)</span>
            </div>
            <div class="share">分享</div>
          </div>
          <div class="give">
            <p class="recharge" @click="showPopup">书币充值</p>
            <p class="month" v-show="data.tishow" @click="sign">签到领月票</p>
            <p class="month" style="color:#8a8b8b" v-show="!data.tishow">已签到</p>
          </div>
          <van-popup
            v-model:show="show"
            closeable
            position="bottom"
            :style="{ height: '30%' }"
          >
            <div class="cz">
              <h4>书币充值</h4>
              <div class="chose">
                <span @click="getNum(index)" v-for="(item,index) in data.numlist" :key="item.id">{{item.num}}书币</span>
              </div>
              <div class="bottom">
                <div class="num">{{data.price}}<span>元</span></div>
                <div class="btn" @click="invest">确认充值</div>
              </div>
            </div>
          </van-popup>
        </div>
        <div class="toolbox">
          <h4>常用工具</h4>
          <div class="tool">
            <div class="item" @click="goto">
              <i>
                <img style="width:20px" src="../assets/imgs/1.png" alt="">
              </i>
              <p>商城</p>
            </div>
            <div class="item">
              <i>
                <img style="width:20px" src="../assets/imgs/2.png" alt="">
              </i>
              <p>我的消息</p>
            </div>
            <div class="item" @click="Conce">
              <i class="iconfont icon-shoucang"></i>
              <p>我的关注</p>
            </div>
            <div class="item">
              <i class="iconfont icon-aixin"></i>
              <p>阅读偏好</p>
            </div>
            <div class="item">
              <i class="iconfont icon-Download_icon"></i>
              <p>我的下载</p>
            </div>
            <div class="item" @click="godd">
              <i class="iconfont icon-dingdan"></i>
              <p>订单管理</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <BomNav />
</template>


<style lang="scss" scoped>
.mycenter {
  width: 100%;
  background-image: linear-gradient(#f7ede1 0%, #f6f6f6 20%);
  height: 100vh;
  .cz{
    padding: 0 12px;
    h4{
      margin-top: 30px;
      font-size: 18px;
      font-weight: 800;
    }
    .chose{
      display: flex;
      justify-content: space-around;
      margin-top: 8px;
      span{
        display: block;
        text-align: center;
        line-height: 30px;
        background-color: #fff;
        width: 20%;
        height: 30px;
        border-radius: 10px;
        border: 1px solid #f96825;
        color: #f96825;
        font-size: 14px;
      }
      span.con{
        background-color: #f96825;
        color: #fff;
      }
    }
    .bottom{
      display: flex;
      align-items: center;
      justify-content: right;
      margin-top: 30px;
      .num{
        font-size: 18px;
        font-weight: 800;
        color: #f96825;
        span{
          font-size: 14px;
          font-weight: 100;
          color: #1c1c1c;
          margin-left: 4px;
        }
      }
      .btn{
        width: 80px;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        color: white;
        background-color: #f96825;
        text-align: center;
        border-radius: 10px;
        margin-left: 20px;
      }
    }
  }
  .content {
    padding: 0 16px;
    header {
      .topBtn {
        display: flex;
        justify-content: right;
        height: 50px;
        align-items: center;
        i {
          font-size: 20px;
          margin-left: 20px;
        }
      }
    }
    .login {
      .before{
         h2 {
        font-size: 20px;
        height: 30px;
        line-height: 30px;
        font-weight: 800;
      }
      .btn {
        width: 96px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
        background-color: #f96825;
        color: white;
        font-size: 14px;
        margin-top: 12px;
        font-weight: 800;
      }
      }
      .after{
        display: flex;
        align-items: center;
        img{
          display: block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        p{
          font-size: 18px;
          font-weight: 800;
          margin-left: 10px;
        }
      }
    }
    .moneybox {
      height: 120px;
      background-color: #fff;
      border-radius: 5px;
      margin-top: 30px;
      padding: 0 14px;
      .money {
        padding: 12px 0;
        display: flex;
        border-bottom: 1px solid #f8f8f8;
        align-items: center;
        .sth {
          font-size: 14px;
          strong {
            display: block;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 16px;
          }
          span {
            display: block;
            height: 24px;
            line-height: 24px;
            color: #a3a3a3;
          }
        }
        .ticket {
          margin-left: 50px;
        }
        .share {
          width: 60px;
          height: 24px;
          margin-left: 60px;
          background-color: #fef7e9;
          color: #fed475;
          text-align: center;
          line-height: 24px;
          border-radius: 10px;
          font-size: 12px;
          font-weight: 800;
        }
      }
      .give {
        display: flex;
        height: 46px;
        line-height: 46px;
        justify-content: space-around;
        p {
          font-size: 14px;
          font-weight: 800;
        }
      }
    }
    .toolbox {
      background-color: #fff;
      border-radius: 5px;
      margin-top: 30px;
      padding: 14px 14px;
      h4 {
        font-weight: 800;
        font-size: 16px;
      }
      .tool {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          width: 30%;
          text-align: center;
          margin-top: 8px;
          margin-bottom: 20px;
          i {
            font-size: 20px;
            margin: 12px 0;
            color: #101010;
            display: block;
          }
          p {
            font-size: 12px;
            color: #101010;
          }
        }
      }
    }
  }
}



.mycenter.night{
  background-image: linear-gradient(#0e0e0e 0%, #0e0e0e 20%);
  .content {
    header {
      .topBtn {
        i {
          color: white;
        }
      }
    }
    .login {
      .before{
         h2 {
        color: white;
      }
      .btn {
        background-color: #f96825;
        color: white;
      }
      }
      .after{
        p{
          color: white;
        }
      }
    }
    .moneybox {
      background-color: #1c1c1c;
      color: white;
    }
    .toolbox {
      background-color: #1c1c1c;
      border-radius: 5px;
      margin-top: 30px;
      padding: 14px 14px;
      color: white;
      .tool {
        .item {
          i {
            color: white;
          }
          p {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
